<template>
  <a-drawer :visible="visible" title="请选择公司" class="login-drawer" :footer="false">
    <template #header="">
      <span>请选择公司</span>
      <div>
        <a-button class="mr-[15px]" @click="cancel">取消</a-button>
        <a-button :loading="props.loading" type="primary" @click="ok">确认选择</a-button>
      </div>
    </template>
    <ul class="data-list">
      <li
        :class="['item', { 'item-style': tenant?.id === item.id }]"
        v-for="item in dataList"
        :key="item.id"
        @click="tenant = item"
      >
        <div class="w-[100px] mr-[20px]">
          <img :src="item.logo" alt="" v-if="item.logo" class="logo" />
        </div>
        <span class="mr-auto">
          {{ item.name }}
        </span>

        <span v-if="item.isLastLogin" class="color-[#566fff] text-13px">上次登录</span>
      </li>
    </ul>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TenantEntity } from '@/entity/UserEntity'

const props = defineProps({
  loading: Boolean,
})

const visible = ref(false)

const dataList = ref<TenantEntity[]>([])
let _callbackFn = (_: TenantEntity, _cl: any) => {}

const tenant: any = ref({})

function open(list: TenantEntity[], Fn: any) {
  dataList.value = list
  _callbackFn = Fn
  visible.value = true
}

function cancel() {
  visible.value = false
  tenant.value = {}
  _callbackFn = null as any
  dataList.value = []
}

function ok() {
  if (!tenant.value?.id) {
    return Message.error('请选择租户')
  }
  _callbackFn(tenant.value, cancel)
}

defineExpose({
  open,
})
</script>

<style scoped lang="scss">
.data-list {
  display: flex;
  flex-direction: column;
  row-gap: 20px;

  .item {
    padding: 20px;
    cursor: pointer;
    border: 1px solid #424242;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    background: #141414;
    display: flex;
    align-items: center;

    &-style {
      background: #111a2c;
      border: 1px solid #1668dc;
    }
  }
}
</style>

<style lang="scss">
.login-drawer {
  .arco-drawer {
    width: 500px !important;
    background-color: #1f1f1f;

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .arco-drawer-header {
      border-bottom: 1px solid rgba(253, 253, 253, 0.12);
      padding: 10px 15px;
      font-size: 14px;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.85);
    }
  }
}
</style>
